<template>
	<view :style="theme">
		<view class="content">
			<view class="card" v-for="(item, index) in list" :key="index"
				@click="jump('/pages/order/detail?type=6&orderId=',item.orderId)">
				<view class="top" :class="item.acStatus == 0?'':'hui'">
					{{item.acStatus == 0?'待核销':item.acStatus == 1?'已核销':item.acStatus == 2?'已取消':''}}
				</view>
				<view class="flex">
					<view class="left">
						<image :src="item.poster"></image>
					</view>
					<view class="right">
						<view class="bt">{{item.activityName }}</view>
						<view class="tip">{{item.activityTime }}</view>
						<view class="tip">{{item.name}}</view>
						<!-- <view class="tip">{{item.siteName}}</view> -->
					</view>
				</view>
				<view class="flex flex_between">
					<view class="flex c3 f26">
						<u-icon color="#333333" name="map" size="30rpx" />
						<text class="ml12">{{item.venueName || item.siteName}}</text>
					</view>
					<view v-if="item.acStatus == 0" class="hxBtn f28 cf" @click.stop="qrFun(item.acCode)">核销</view>
				</view>
			</view>
			<u-loadmore v-if="end && list.length >= 10" :status="status" line />
		</view>
		<view v-if="list.length === 0" class="no-order">
			<image :src="imgHost+'/default_nodata.png'"></image>
			<view>暂无活动～</view>
		</view>
		<u-popup :show="showPops" mode="bottom" round="20rpx" custom-style="background: none" :catchtouchmove="true">
			<view class="popsCnt">
				<view class="bt f32 c2">
					活动核销
					<view class="closeBtn flex" @click="showPops = false">
						<u-icon name="close" size="30rpx" color="#666"/>
					</view>
				</view>
				<view class="tips f28 ztColor">
					到场后请出示二维码给场馆工作人员 完成活动核销
				</view>
				<view class="code_box_code">
					<canvas canvas-id="qrcode" style="width: 211px;height: 211px;margin: 0 auto;" />
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from '@/common/jweixin.js';
	// #endif
	import uQRCode from '@/common/uqrcode.js'
	export default {
		data() {
			return {
				list: [],
				showPops: false,
				page: 1,
				end: false,
				firstQueryTime: '',
				status: 'nomore',
			}
		},
		onShow() {
			this.firstQueryTime = this.$app.firstQueryTime()
			this.list = [];
			this.page = 1;
			this.end = false;
			this.getList()
		},
		methods: {
			qrFun: function(text) {
				this.showPops = true
				let that= this
				uni.showLoading({ title: '加载中...' })
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: that,
					text: text,
					size: 211,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						 uni.hideLoading()
					}
				})
			},
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			getList() {
				this.$app.ajax({
					data: {
						pagination: {
							firstQueryTime: this.firstQueryTime,
							page: this.page,
							rows: 10
						},
						param: {
							venueId: this.venueId,
							memberId: this.userInfo.id
						}
					},
					api: this.$api.myActivityOrderListMini()
				}).then((res) => {
					if (res.errorCode === '000000') {
						if (!res.recordList || res.recordList.length < 10) {
							this.end = true
						}
						if (res.recordList) {
							this.list = this.list.concat(res.recordList)
						}
					}
				}).catch(() => {})
			},
			reachBottom() {
				if (!this.end) {
					this.page += 1;
					this.getList();
				}
			},
			// 触底加载更多数据
			onReachBottom(e) {
				this.reachBottom()
			}

		}

	}
</script>
<style scoped lang="scss">
	.content {
		padding: 30rpx;
		box-sizing: border-box
	}

	.card {
		background: #FFFFFF;
		border-radius: 8rpx;
		position: relative;
		padding: 24rpx 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.top {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 0 20rpx;
		line-height: 48rpx;
		height: 48rpx;
		background: $phb;
		box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
		border-radius: 16rpx 0 16rpx 0;
	}

	.top.hui {
		background: rgb(153, 153, 153);
	}

	.left image {
		width: 220rpx;
		height: 124rpx;
		border-radius: 12px;
		margin-right: 20rpx;
	}

	.right .bt {
		font-size: 32rpx;
		font-weight: 500;
		color: #222222;
		line-height: 1.5;
		margin-bottom: 5rpx;
	}

	.right .tip {
		font-size: 26rpx;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 5rpx;
	}

	.right .tip:last-of-type {
		margin-bottom: 0;
	}
	.hxBtn {
		width: 120rpx;
		height: 60rpx;
		background: $color;
		text-align: center;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
	}
	.popsCnt {
		z-index: 9999;
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		box-sizing: border-box;
		padding: 40rpx 0 80rpx;
	
		.bt {
			text-align: center;
			position: relative;
			line-height: 40rpx;
			.closeBtn {
				position: absolute;
				right: 30rpx;
				top: 0;
				height: 40rpx;
			}
		}
		.tips {
			text-align: center;
			width: 450rpx;
			margin: 40rpx auto;
		}
	
		.code_box_code {
			margin: 0 auto;
		}
	}
</style>